<template>
<div class="pd10">
    <el-form @submit.native.prevent :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="原密码" prop="oldpsw">
            <el-input style="width:217px;" v-model="ruleForm.oldpsw"></el-input>
        </el-form-item>

        <el-form-item label="新密码" prop="newpsw">
            <el-input style="width:217px;" v-model="ruleForm.newpsw"></el-input>
        </el-form-item>

        <el-form-item label="确认新密码" prop="agpsw">
            <el-input style="width:217px;" v-model="ruleForm.agpsw"></el-input>
        </el-form-item>

            <el-form-item label="修改头像" prop="headimg">
                 <!-- <VueCropper /> -->
        
                 <Dialog >
                     <VueCropper />
                 </Dialog>
        </el-form-item>

       

        <el-form-item>
            <el-button type="primary" :loading="bloading" @click="submitForm('ruleForm')">修改密码</el-button>
        </el-form-item>

    </el-form>



</div>
</template>

<script>
import VueCropper from './VueCropper.vue'
import Dialog from './Dialog.vue'
import CONFIG from '@/config/config.js'
export default {
    components: {
        VueCropper,
        Dialog
    },
    data() {
          var regpsw = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('不能为空'))
            }
            if (value.length < 6 || value.length > 18) {
                return callback(new Error('需6至18个字符'))
            }
            callback()
        };
        var regagpsw = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('不能为空'))
            }
            if (this.ruleForm.newpsw != this.ruleForm.agpsw) {
                return callback(new Error('两次密码不一致'))
            }
            callback()
        };
        return {
            bloading:false,
            ruleForm: {
                oldpsw: '',
                newpsw: '',
                agpsw: ''
            },
            rules: {
                oldpsw: [{
                        required: true,
                        message: '密码不可为空',
                        trigger: 'blur'
                    },
                    {
                        min: 6,
                        max: 18,
                        message: '长度在 6 到 18 个字符',
                        trigger: 'blur'
                    },
                    {
                        validator: regpsw,
                        trigger: 'blur'
                    }
                ],
                newpsw:[{
                    validator: regpsw,
                    trigger: 'blur'
                }],
                agpsw:[{
                    validator: regagpsw,
                    trigger: 'blur'
                }]
            }
        }
    },
    mounted(){
    },
    methods: {
        submitForm(formName) {
            this.bloading=true
            this.$refs[formName].validate((valid) => {
                console.log('吱吱', valid)
                if (valid) {
                    this.$axios.post(this.$api.modifypassword,{
                        oldpsw:this.ruleForm.oldpsw,
                        newpsw:this.ruleForm.newpsw
                    })
                    .then((res)=>{
                        if(res.errCode>0){
                            this.$message.success({
                                message:'密码修改成功,请重新登录',
                                duration:1000,
                                onClose: () => {
                                  this.$docCookies.removeItem(CONFIG.COOKIEJWTNAME)
                                  this.$router.push({path:'/admin'})
                                }
                            })
                        }else{
                             this.$message.error({
                                message:res.msg
                            })
                        }
                        this.bloading=false
                    })
                } else {
                    this.$message.error({
                        message:'正则验证失败'
                    })
                    this.bloading=false
                    return false;
                }
            });
        }
    }
}
</script>

<style scoped>

</style>
